import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View, Button, Image, TouchableHighlight,
    TextInput, KeyboardAvoidingView, Alert, Keyboard,
} from 'react-native';
import DeviceRn from '../../components/Tools/device';
import Http from '../../components/Tools/http.unite';
import Toast, { DURATION } from 'react-native-easy-toast';
import { Variable } from '../../variables';
let DevWH = DeviceRn().getWidHig();
export default class FeedBackScreen extends Component {
    static navigationOptions = ({ navigation, screenProps }) => (
        {
            title: '意见反馈',
            headerStyle: {
                paddingLeft: 4,
                backgroundColor: screenProps.header,
                borderBottomColor: '#eee',
                borderBottomWidth:1
            },
            headerTintColor: screenProps.color,
            headerTitleStyle: {
                color: screenProps.color,
            },
        });

    componentWillUnmount() {
        this.time = null;
        Keyboard.dismiss();
    }

    constructor(props) {
        super(props);
        this.theme = this.props.screenProps;
        this.type = 3;
        this.state = {};
        this.flag = true;
    }

    _submit() {
        Keyboard.dismiss();
        let payload = {
            i: 5,
            id: 177,
            content: this.state.text
        };
        let { goBack } = this.props.navigation;
        if (this.flag == true) {
            this.flag = false;
            Http().httpPost('Interfaces/feedback', payload).then(data => {
                let resPones = data;
                if (resPones.code == 1) {
                    this.refs.toast.show('反馈成功');
                    this.state = {};
                    this.setState({ text: '' });
                    this.flag = true;
                    this.time = setInterval(() => {
                        clearInterval(this.time);
                        goBack();
                    }, 800)
                } else {
                    this.refs.toast.show('反馈失败');
                    this.flag = true;
                }
            }).catch(err => {
                this.refs.toast.show('提交失败');
                this.flag = true;
            })
        }
    }

    _onPressButton() {
        Keyboard.dismiss();
    }

    render() {
        return (
            <View style={[styles.contain, styles.align]}>
                <Toast ref="toast" position="center" />
                {/* <TouchableHighlight activeOpacity={1} style={[styles.contain]} onPress={()=>this._onPressButton()}> */}
                <View style={[styles.contain, styles.align, styles.pos]}>
                    <KeyboardAvoidingView style={styles.contain} behavior="padding">
                        <Text style={styles.txt}>输入反馈信息</Text>
                        <TextInput style={styles.textinput}
                            onChangeText={(text) => this.setState({ text })}
                            value={this.state.text}
                            multiline={true}
                            selectionColor={this.theme.color}
                            maxLength={120}
                            autoCapitalize={'none'}
                            placeholder={'最多输入120个字符'}
                            underlineColorAndroid="transparent"
                        />
                        <View style={[styles.btn, this.state.text ? { backgroundColor: this.props.screenProps.header } : { backgroundColor: '#a9a9a9' }]}>
                            <TouchableHighlight style={styles.btn} underlayColor={this.props.screenProps.header} activeOpacity={0.75} disabled={this.state.text ? false : true} onPress={() => this._submit()} >
                                <Text style={Variable.wf}>确认提交</Text>
                            </TouchableHighlight>
                        </View>
                    </KeyboardAvoidingView>
                </View>
                {/* </TouchableHighlight> */}
            </View>
        );
    }
};
const styles = StyleSheet.create({
    contain: {
        flex: 1,
        backgroundColor: '#fff',
    },
    align: {
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
    },
    pos: {
        position: 'absolute'
    },
    txt: {
        color: '#888',
        margin: 20,
    },
    textinput: {
        width: 280,
        borderWidth: 1,
        borderColor: '#a9a9a9',
        padding: 10,
        height: 100,
        marginLeft: 20,
        fontSize: 14,
        textAlignVertical: 'top'
    },
    btn: {
        flex: 0,
        borderRadius: 6,
        overflow: 'hidden',
        justifyContent: 'center',
        alignItems: 'center',
        margin: 20,
        height: 42,
        width: 100
    },
});